import { defineStore } from 'pinia'
import { ref, watch } from 'vue'

export type Theme = 'default' | 'tech-blue' | 'medical-green' | 'dark'

export const useThemeStore = defineStore('theme', () => {
  const currentTheme = ref<Theme>((localStorage.getItem('theme') as Theme) || 'default')

  watch(currentTheme, (newTheme: Theme) => {
    document.documentElement.className = newTheme
    localStorage.setItem('theme', newTheme)
  })

  const setTheme = (theme: Theme) => {
    currentTheme.value = theme
  }

  return { currentTheme, setTheme }
})
